<template>
  <div>
    <a-button key="submit" type="primary" v-print="printObjs" style="color: #fff">确定</a-button>
    <div v-show="false">
      <div id="printMes" v-if="printSpec == 1">
        <div
          v-for="(item, index) in detailDataArr"
          :key="index"
          :style="(index + 1) % 1 == 0 ? 'page-break-after:always' : ''"
        >
          <div>
            <vue-qr :text="JSON.stringify({ id: item.id, EntityType: 'goods' })" :size="200"></vue-qr>
            <div class="title" style="font-size: 20px; padding-left: 20px">
              <!-- <div style="font-weight: bold">物品名称</div> -->
              <div>{{ item.serialName }}</div>
            </div>
            <div class="title" style="font-size: 20px; padding-left: 20px">
              <!-- <span style="font-weight: bold">物品编号</span> -->
              <span>{{ item.serialNumber }}</span>
            </div>
          </div>
        </div>
      </div>

      <div id="printMes" v-else>
        <div
          v-for="(item, index) in detailDataArr"
          :key="index"
          :style="(index + 1) % 1 == 0 ? 'page-break-after:always' : ''"
        >
          <div class="list">
            <div class="title bb">
              {{ item.serialName }}
            </div>

            <div class="cont">
              <div class="left">
                <div class="row bb">
                  <span class="label br">物品编号</span>
                  <span class="content br">{{ item.serialNumber || '-' }}</span>
                </div>
                <div class="row bb">
                  <span class="label br">规格</span>
                  <span class="content br">{{ item.serialSpecifications || '-' }}</span>
                </div>
                <div class="row bb">
                  <span class="label br">单位</span>
                  <span class="content br">{{ item.unitName || '-' }}</span>
                </div>
                <div class="row bb">
                  <span class="label br">物品属性</span>
                  <span class="content br">{{ item.serialProperties || '-' }}</span>
                </div>
              </div>
              <div class="right bb">
                <vue-qr :text="JSON.stringify({ id: item.id, EntityType: 'goods' })" :size="80"></vue-qr>
              </div>
            </div>
            <div class="bott">
              <div class="row bb">
                <span class="label br">库存预警</span>
                <span class="content">{{ item.inventoryMin || '-' }} - {{ item.inventoryMax || '-' }}</span>
              </div>
              <div class="row">
                <span class="label br">打印时间</span>
                <span class="content">{{ item.date || '-' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import print from 'vue-print-nb'
import moment from 'moment'
import vueQr from 'vue-qr'
import { getAction, postAction } from '@/api/manage'

export default {
  props: {
    id: {
      type: String,
      default: '',
    },
    printSpec: {
      type: Number,
      default: 1,
    },
  },
  directives: {
    print,
  },
  data() {
    return {
      moment,
      detailDataArr: [],
      printObjs: {
        id: 'printMes',
        clickMounted(vue) {
          vue.$emit('changePrint')
          console.log('点击v-print绑定的按钮了！')
        },
      },
      detailData: {
        orderTaskListVoList: [],
        id: '',
      },
    }
  },
  components: { vueQr },
  methods: {
    toVisible() {},
    getData() {
      this.detailDataArr = []
      let date = moment(new Date()).format('YYYY-MM-DD HH:mm')
      postAction('/basicserial/basicSerialInfo/list', { id: this.id, pageSize: -1, pageNo: 1 }).then((res) => {
        console.log(res, 'res')
        if (res.code === 200) {
          this.detailData = res.result.records
          this.detailData.forEach((ele) => {
            ele.date = date
          })
          this.detailDataArr.push(...this.detailData)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.code {
  color: #000;
  font-size: 16px;
  font-weight: 500;
  margin-top: 15px;
}

.bb {
  border-bottom: 1px solid #999;
}

.br {
  border-right: 1px solid #999;
}

.list {
  border: 1px solid #333;
  width: 80mm;
  height: 60mm;
  display: flex;
  flex-direction: column;

  .title {
    font-weight: bold;
    font-size: 20px;
    height: 12mm;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cont {
    display: flex;

    .left,
    .right {
      flex: 2;
    }

    .right {
      flex: 1;
      overflow: hidden;
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .bott {
    height: 16mm;
  }
}

.row {
  display: flex;
  height: 8mm;
  line-height: 8mm;

  .label {
    width: 18mm;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 1mm;
  }

  .content {
    flex: 1;
    padding: 0 1mm;
  }
}
</style>
